<template>
    <div>
        <van-overlay :show="overlayShow" :z-index="1000" style="background-color: rgba(0, 0, 0, 0.1)">
            <div style="display: flex;align-items: center;justify-content: center;height: 100%;">
                <van-loading type="spinner" color="#1989fa">Loading...</van-loading>
            </div>
        </van-overlay>
        <div class="chooseImg" id="chooseImg">
            <van-uploader :preview-size="imgwidth + 'px'" reupload v-model="imgs" accept="*" :after-read="uploadImg" :max-count="9" >
            </van-uploader>
        </div>
        <div class="footBtn">
            <van-button safe-area-inset-bottom @click="commitImg" type="info" size="large"
                style="margin-top:5vh;">上传</van-button>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Toast, Uploader, Loading } from 'vant'
import qs from 'qs'
Vue.use(Uploader).use(Loading)
export default {
    name: 'billuploadold',
    data: function () {
        return {
            imgs: [],
            imgurls: '',
            url: '',
            imgwidth: 80,
            overlayShow: false
        }
    },
    mounted () {
        let chooseImg = document.getElementById('chooseImg')
        // //console.log('chooseImgwidth', chooseImg.offsetWidth)
        this.imgwidth = chooseImg.offsetWidth / 3 - 8
    },
    methods: {
        uploadImg: function (file, detail) {
            file.status = 'uploading'
            file.message = '上传中...'
            let deviceFile = []
            let formData = new FormData()
            if (Array.isArray(file)) {
                deviceFile = file
            } else {
                deviceFile.push(file)
            }
            for (let i = 0; i < deviceFile.length; i++) {
                formData.append('image' + i, deviceFile[i].file, deviceFile[i].name)
            }
            formData.append('place', this.place)
            this.axios({
                method: 'post',
                url: '/api/fpinfor1.filedo',
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data;charset=UTF-8'
                }
            }).then(res => {
                if (res.data.flag === '0') {
                    this.imgurls += res.data.fileInfo[0].newname + ';'
                    file.status = 'done'
                    Toast('上传成功')
                } else {
                    file.status = 'failed'
                    file.message = '上传失败'
                    Toast('上传失败')
                }
            }).catch(res => {
                //console.log(res)
            })
        },
        commitImg: function () {
            if (this.imgurls == null || this.imgurls === '') {
                alert('请选择图片')
                return
            }
            this.overlayShow = true
            this.axios({
                method: 'post',
                url: '/api/fpinfor1.wxscansaveforimg.do',
                data: qs.stringify({
                    'imgIds': this.imgurls
                })
            }).then(res1 => {
                // alert(JSON.stringify(res1))
                //console.log('res1', res1)
                this.overlayShow = false
                alert(res1.data.msg)
                this.$router.go(-1)
            }).catch(res1 => {
                this.overlayShow = false
                alert('上传失败' + JSON.stringify(res1))
                //console.log('catch res1', res1)
            })
        }
    }
}
</script>

<style>
.footBtn {
    position: fixed;
    bottom: 0;
    line-height: var(--footer-height);
    width: 100%;
}
</style>
